import { useAccount, useConnection, Web3ConfigProvider } from "@ant-design/web3"
import {
  MetaMask,
  WagmiWeb3ConfigProvider,
  WalletConnect,
} from '@ant-design/web3-wagmi';
import { Button } from "antd";
import { useEffect } from "react";
const AntDesignWeb3 = () => {
  // const [accounts, setAccounts] = useState<any>(); // 暂时注释，未使用
  const { account } = useAccount();
  const { connect } = useConnection();
  useEffect(() => {
    init();
  }, [])
  useEffect(() => {
    console.log('======account', account);

  }, [JSON.stringify(account)])
  const init = async () => {
    const accounts = await (window as any).ethereum.request({ method: 'eth_accounts' });
    console.log('====', accounts);

  }
  return <div>

    <Web3ConfigProvider connect={async (wallets) => {
      console.log("====wallets", wallets);

    }}>
      <WagmiWeb3ConfigProvider wallets={[MetaMask(), WalletConnect()]}
        walletConnect={{
          projectId: '81ab4072cd905b3008ec381eef6da04f',
          useWalletConnectOfficialModal: true,
        }}>
        <Button type="link" onClick={async () => {
          const data = await connect?.();
          console.log('===========data', data);

        }}>connect</Button>
        {/* <Button type="link" onClick={connectWallet}>{ account ? 'disconnect' : 'connect' }</Button> */}
        {/* <Connector
          account={ accounts }
          onConnected={(accounts) => {
            setAccounts(accounts);
            console.log('======accounts', accounts);
          }}
          onConnect={() => {
            console.log('======connect', account);
          }}>
          <ConnectButton/>
        </Connector> */}
      </WagmiWeb3ConfigProvider>
    </Web3ConfigProvider>
  </div>
}

export default AntDesignWeb3